<template>
  <div class="top-header">
    <el-button type="primary" size="small" @click="preview">预览</el-button>
    <el-button type="primary" size="small" @click="save">保存</el-button>
    <el-button type="success" size="small" @click="publish">发布</el-button>
  </div>
</template>

<script>
import { EventBus } from '@/event-bus.js';

export default {
  name: 'TopHeader',
  methods: {
    preview() {
      EventBus.$emit('preview-canvas');
    },
    save() {
      EventBus.$emit('save-canvas');
    },
    publish() {
      alert('发布功能待开发');
    }
  }
};
</script>

<style scoped>
.top-header {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
  text-align: right;
}
</style>